<!--  -->
<template>
  <div class="main">
    <el-button-group class="button-list">
      <!-- //创建文件夹 -->
      <el-button
        type="primary"
        @click="createFolder"
        v-if="$route.meta.title === '所有'"
      >
        <el-icon><MessageBox /></el-icon>
        <span>创建文件夹</span>
      </el-button>
      <!-- 上传 -->
      <el-button
        type="primary"
        @click="uploadFile"
        v-if="$route.meta.title === '所有'"
      >
        <el-icon><Upload /></el-icon>
        <span>上传</span>
      </el-button>
      <!-- 批量下载 -->
      <el-button type="primary" @click="batchDownload" v-if="false">
        <el-icon><Download /></el-icon>
        <span>批量下载</span>
      </el-button>
      <!-- 批量删除 -->
      <el-button
        type="primary"
        @click="batchDeleteFile"
        v-if="
          $route.meta.title !== '已分享文件' && $route.meta.title !== '回收站'
        "
      >
        <el-icon><Delete /></el-icon>
        <span>批量删除</span>
      </el-button>
      <!-- <el-button type="primary">批量修改</el-button> -->
      <!-- 批量移动 -->
      <el-button type="primary" @click="batchMoveFile" v-if="false">
        <el-icon><Switch /></el-icon>
        <span>批量移动</span>
      </el-button>
    </el-button-group>
  </div>
</template>

<script setup>
import {} from 'vue'
import { MessageBox } from '@element-plus/icons-vue'
const emit = defineEmits([
  'create-folder',
  'batch-download',
  'upload-file',
  'batch-delete-file',
  'batch-move-file'
])
const createFolder = () => {
  emit('create-folder', createFolder)
}
const batchDownload = () => {
  emit('batch-download', batchDownload)
}
const uploadFile = () => {
  emit('upload-file', uploadFile)
}
const batchDeleteFile = () => {
  emit('batch-delete-file', batchDeleteFile)
}
const batchMoveFile = () => {
  emit('batch-move-file', batchMoveFile)
}
</script>

<style lang="scss" scoped>
.main {
  height: 6vh;
  line-height: 5vh;
}
//按钮动画
.button-list .el-button {
  transition: 0.5s;
}
.button-list .el-button:hover {
  transform: scale(1.2);
  border-radius: 15px;
  margin: 0 5px 0 5px;
}
@media screen and (max-width: 930px) {
  .button-list span {
    display: none;
  }
}
</style>
